import React, { useEffect, useState } from 'react'
import { getProductList } from '../../api'
import { ListItem } from 'antd-mobile/es/components/list/list-item'
import { useNavigate } from 'react-router-dom'
import { InfiniteScroll, List } from 'antd-mobile'
import './list.css'

export default function List2() {
  let navigate = useNavigate()
  let [list, setList] = useState([]) // 存储商品的列表
  let [count, setCount] = useState(1)  // 存储商品的列表
  const [hasMore, setHasMore] = useState(true)  // 是否有更多的数据
  useEffect(() => {
    if (list.length === 0) {
      getProductList(count).then((res) => {
        setList(res.data.data);
      })
    }
  }, [count])
  async function loadMore() {  //上拉加载

    const append = await getProductList(count)  //取下一页面的数据
    setList(val => [...val, ...append.data.data])
    setHasMore(append.data.data.length > 0)  //有数据才进行加载
    count++
    setCount(count)
  }
  return (
    <div className='list_box'>
      <List className='list_11'>
        {
          list.map((item, index) => {
            return <ListItem className='listItem' arrow={false} key={index} onClick={() => navigate("/detail/" + item.proid)}>
              <img src={item.img1} />
              <b className='desc'>{item.desc}</b>
              <h3 className='price'>&yen;{item.originprice}</h3>
            </ListItem>
          })
        }
      </List>
      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />

    </div>
  )
}


